import React from 'react'
import { Button, Card, Drawer, Row, Space, Tabs, Tag } from 'antd'
import styles from './index.module.less'
import HandleList from '../HandleList'

const { TabPane } = Tabs

const SchedulerDetail = props => {
  const { visible, data, setSchedulerDetail } = props
  console.log(data)

  return (
    <Drawer
      className={styles['schedular-detail-drawer']}
      visible={visible}
      width="100%"
      closable={false}
      bodyStyle={{ padding: 0, display: 'flex', flexDirection: 'column' }}
      destroyOnClose
    >
      <Card
        bordered={false}
        extra={
          <Space>
            <Button
              onClick={() => {
                setSchedulerDetail({ visible: false, data: {} })
              }}
            >
              返回
            </Button>
          </Space>
        }
      >
        <Row justify="space-between">
          <Space direction="vertical">
            <Space>
              {data.scheduler_type && (
                <Tag color="green">{data.scheduler_type}</Tag>
              )}
              <span>{data.name}</span>
              {/* <span>{data.version}</span> */}
              {data?.tags?.map?.(tag => (
                <Tag key={tag}>{tag}</Tag>
              ))}
              {/* <Tags tags={data.tags} disabled /~ onTagsChange={onTagsChange} ~/ />*/}
            </Space>
            <Space>
              <span>调度描述：</span>
              <span>{data.description}</span>
            </Space>
            <Space>
              <span>调度方式：</span>
              <span>{data.type}</span>
            </Space>
            <Space>
              <span>调度剧本：</span>
              <span>{data.playbook}</span>
            </Space>
            <Space>
              <span>创建人：</span>
              <span>{data.created_by}</span>
            </Space>
            <Space>
              <span>调度创建时间：</span>
              <span>{data.created_at}</span>
            </Space>
          </Space>
        </Row>
      </Card>
      <Tabs>
        <TabPane tab="调度执行" key="1">
          <Space direction="vertical">
            <Space>
              <span>调度剧本：</span>
              <span>{/* data.playbook_ids */} ip封禁</span>
            </Space>
            <Space>
              <span>调度开始时间：</span>
              <span>{data.start_time}</span>
            </Space>
            <Space>
              <span>调度结束时间：</span>
              <span>{data.end_time}</span>
            </Space>
            <Space>
              <span>调度输入：</span>
              <span></span>
            </Space>
            <Space>
              <span>调度结果</span>
              <span>正在执行</span>
            </Space>
          </Space>
        </TabPane>
        <TabPane tab="处置列表" key="2">
          <HandleList />
        </TabPane>
      </Tabs>
    </Drawer>
  )
}
export default SchedulerDetail
